<template>
    <section class="form-container">
        <el-form ref="formRef" label-width="120px" label-position="left" style="padding:30px 14px;">

            <el-form-item label="模板" prop="templateId">
                <el-select v-model="index" filterable clearable placeholder="请选择" @change="changeTemplate">
                    <el-option
                        v-for="(item,key) in templateList"
                        :key="key"
                        :label="item.name"
                        :value="key"
                    />
                </el-select>
            </el-form-item>

            <el-form-item label="示例">
                <el-input type="textarea" v-model="example" readonly autosize resize="none" style="border: none; overflow: hidden;"/>
            </el-form-item>

            <el-form-item v-for="(item,key) in fields" :label="item.name" :prop="item.key" >
                <el-input v-model="item.value"/>
            </el-form-item>

            <el-form-item>
                <el-popconfirm :title="'确定发送吗？'" @onConfirm="submitForm()">
                    <el-button slot="reference" type="primary">发送</el-button>
                </el-popconfirm>
            </el-form-item>
        </el-form>
    </section>
</template>

<script>
import {TemplateApi} from "@/api/message/TemplateApi";
import {MessageApi} from "@/api/message/MessageApi";

export default {
    name: 'wxMessageUpdate',
    components: {},
    data() {
        return {
            templateList: [],
            index:"",
            example:'',
            fields:[],
            rules: {
                // id: [
                //     {required: true, message: '请选择消息类型', trigger: 'change'}
                // ]
            },
            dialogVisible: false
        }
    },
    created() {
        const that = this

        this.dialogVisible = true

        if (this.$refs['formRef'] !== undefined) {
            this.$refs['formRef'].resetFields()
        }

        this.$nextTick(() => {
            let params = {
                pageIndex: 1,
                pageSize: 100,
                messageType: 20
            }
            TemplateApi.getPage(params).then((response) => {
                that.templateList = response.records
            })
        })
    },
    methods: {
        changeTemplate(index){
            this.fields = this.templateList[index].fields
            this.example  = this.templateList[index].content
        },

        // 提交表单
        submitForm() {
            const that = this

            if(!that.index || that.fields.length===0){
                that.$message({
                    message: '请选择消息模版',
                    type: 'warning'
                });
                return false;
            }

            let arr = []
            for (let i = 0; i < that.fields.length; i++) {
                let item = that.fields[i]
                if (!item.value) {
                    that.$message({
                        message: '[' + item.name + ']不能为空',
                        type: 'warning'
                    });

                    return false;
                }

                arr.push(item.value)
            }

            let submitData = {}
            submitData['templateId'] = that.templateList[that.index].id
            submitData['messageValue'] = arr

            const loading = this.$loading({
                lock: true,
                text: '发送中...',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            MessageApi.sendWxTemplateMessage(submitData).then(() => {
                loading.close();
            })
        }
    }
}
</script>

<style>
</style>
